<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="tabs/tab3" text="返回"></ion-back-button>
    </ion-buttons>
    <ion-title>【c04】图标</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>用法1:总是使用相同的图标,不考虑使用的是哪种mode</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <label>
        <ion-icon name="time-outline"></ion-icon>
        name="time-outline"
      </label>
      <br>
      <label>
        <ion-icon name="logo-twitter"></ion-icon>
        name="logo-twitter"
      </label>
    </ion-card-content>
  </ion-card>


  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>用法2:自动使用与mode相匹配的"star"图标</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <label>
        <ion-icon name="star"></ion-icon>
        name="star"
      </label>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>用法3:显式为每种mode分别设置对应的图标</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <label>
        <ion-icon name="home-outline"></ion-icon>
        name="home-outline"
      </label>
    </ion-card-content>
  </ion-card>

</ion-content>
